Background
A jQuery plugin for full-frame image and video backgrounds.
Demo
Basic
Responsive
Video
YouTube
Use
Main
background.js
background.css
Dependencies
core.js
transition.js
Basic
Create a new Background by passing the source image URL at initialization:
$(".target").background({
source: "http://example.com/image.jpg"
});
<div class="target">
...
</div>
Note: You will need to push any content above the background elements by setting the z-index.
Responsive
Create a responsive-friendly Background by defining key/value pairs containing the min-width
image URLs:
$(".target").background({
source: {
"0px": "http://example.com/image-small.jpg",
"980px": "http://example.com/image-large.jpg"
}
});
HTML5 Video
Create a video Background by defining proper browser-specific source video URLs, as well as a poster image URL:
$(".target").background({
source: {
poster: "http://example.com/poster.jpg",
webm: "http://example.com/video.webm",
mp4: "http://example.com/video.mp4",
ogg: "http://example.com/video.ogv"
}
});
YouTube Video
Create a YouTube video Background by passing the YouTube embed URL as the source. If you do not define a poster, the YouTube thumbnail will be used:
$(".target").background({
source: {
poster: "http://example.com/poster.jpg",
video: "//www.youtube.com/embed/VIDEO_ID"
}
});
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-background-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description |
---|---|---|---|
autoPlay |
boolean |
true |
Autoplay video |
customClass |
string |
'' |
Class applied to instance |
embedRatio |
number |
1.777777 |
Video / embed ratio (16/9) |
loop |
boolean |
true |
Loop video |
mute |
boolean |
true |
Mute video |
source |
string OR object |
null |
Source image (string or object) or video (object) or YouTube (object) |
youtubeOptions |
object |
null |
Custom YouTube player parameters (to be used cautiously); See https://developers.google.com/youtube/player_parameters for more |
Events
Events are triggered on the target instance's element, unless otherwise stated.
Event | Description |
---|---|
loaded.background |
Background media loaded |
ready.background |
Background media ready |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
load
Loads source media
$(".target").background("load", "path/to/image.jpg");
$(".target").background("load", { "0px": "path/to/image-small.jpg", "980px": "path/to/image-large.jpg" });
$(".target").background("load", { "poster": "path/to/image.jpg", "webm": "path/to/video.webm", "mp4": "path/to/video.mp4", "ogg": "path/to/video.ogv" });
$(".target").background("load", { "poster": "path/to/image.jpg", "video": "//www.youtube.com/embed/VIDEO_ID" });
Parameters
Name | Type | Default | Description |
---|---|---|---|
source |
string OR object |
Source image (string or object) or video (object) or YouTube (object); |
pause
Pauses target video
$(".target").background("pause");
play
Plays target video
$(".target").background("play");
unload
Unloads current media
$(".target").background("unload");
CSS
Class | Type | Description |
---|---|---|
.fs-background-element |
element |
Target elmement |
.fs-background |
element |
Base widget class |
.fs-background-container |
element |
Container element |
.fs-background-media |
element |
Media element |
.fs-background-media.fs-background-animated |
modifier |
Indicates animated state |
.fs-background-media.fs-background-navtive |
modifier |
Indicates native support |
.fs-background-media.fs-background-fixed |
modifier |
Indicates fixed positioning |
.fs-background-embed |
element |
Embed/iFrame element |
.fs-background-embed.fs-background-embed-ready |
modifier |
Indicates ready state |